<template>
  <ProLayout v-bind="layoutConf" v-model:openKeys="state.openKeys" v-model:collapsed="state.collapsed"
    v-model:selectedKeys="state.selectedKeys" :breadcrumb="{ routes: breadcrumb }">
    <template #rightContentRender>
      <RightContent />
    </template>
    <template #breadcrumbRender="{ route, params, routes }">
      <span v-if="routes.indexOf(route) === routes.length - 1">{{ route.breadcrumbName }}</span>
      <router-link v-else :to="{ path: route.path, params }">
        {{ route.breadcrumbName }}
      </router-link>
    </template>
    <RouterView v-slot="{ Component }">
      <!-- <WaterMark :content="watermarkContent"> -->
      <component :is="Component" />
      <!-- </WaterMark> -->
    </RouterView>
  </ProLayout>
</template>

<script setup lang="ts">
import ProLayout, { getMenuData, clearMenuItem } from "@ant-design-vue/pro-layout";
import { computed, reactive, watchEffect } from "vue";
import { useRouter } from "vue-router";
import RightContent from "./RightContent.vue";
import { RouterView } from "vue-router";
import { Route } from "ant-design-vue/es/breadcrumb/Breadcrumb";


const router = useRouter();
const { menuData } = getMenuData(clearMenuItem(router.getRoutes()));
const state = reactive({
  collapsed: false, // default value
  openKeys: ["/welcome"],
  selectedKeys: ["/welcome"],
});

const layoutConf = reactive({
  navTheme: "dark",
  headerTheme: "dark",
  layout: "side",
  splitMenus: false,
  menuData,
});

const breadcrumb = computed(() =>
  router.currentRoute.value.matched.concat().map((item) => {
    return <Route>{
      path: item.path,
      breadcrumbName: item.meta.title || '',
    };
  })
);

watchEffect(() => {
  if (router.currentRoute) {
    const matched = router.currentRoute.value.matched.concat();
    state.selectedKeys = matched
      .filter((r) => r.name !== "index")
      .map((r) => r.path);
    state.openKeys = matched
      .filter((r) => r.path !== router.currentRoute.value.path)
      .map((r) => r.path);
  }
});

</script>


